<template>
  <div class="content">
    <div class="box addBox" @click="openDetails()">
      <van-icon name="plus" size="40" />
    </div>
    <div
      class="box"
      v-for="(item, index) in list"
      :key="index"
      @click="openDetails(item._id)"
      v-longpress="
        () => {
          longpress(item._id);
        }
      "
    >
      <p>{{ item.content }}</p>
      <p class="p-time">{{ item.dates }}</p>
    </div>
  </div>
</template>
    
<script lang="ts">
import { showConfirmDialog } from "vant";
import { useRoute, useRouter } from "vue-router";
import { defineComponent, onMounted, ref, Ref, watch } from "vue";
import { getNode, Node, getTodo, Todo, nodeDelelte,todoDelelte } from "../api/index";
export default defineComponent({
  props: {
    clickIndex: {
      type: Number,
    },
  },
  setup(props) {
    watch(props, () => {
      getNote(props.clickIndex);
    });
    onMounted(() => {
      getNote();
    });
    let list = ref<any[]>([]);
    let router = useRouter();
    const getNote = async (clickIndex?: number): Promise<void> => {
      try {
        if (clickIndex == 1) {
          const { data } = (await getTodo({ page: 1, size: 16 })) as Todo;
          list.value = data;
        } else {
          const { data } = (await getNode({ page: 1, size: 16 })) as Node;
          list.value = data;
        }
      } catch (e) {
        console.log(e);
      }
    };
    const openDetails = (_id?: string) => {
      router.push({ path: "/OpenDetails", query: { _id,clickIndex:props.clickIndex} });
    };
    const hanleDelete = async (id:string): Promise<void> => {
      try {
        if (props.clickIndex === 0) {
          const { data } = await nodeDelelte(id);
        } else {
         const { data } = await todoDelelte(id);
        }
        getNote(props.clickIndex);
      } catch (e) {
        console.log(e);
      }
    };
    const longpress = (id: string) => {
      showConfirmDialog({
        title: "删除",
        // message:
        //     '如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。',
      })
        .then(() => {
            hanleDelete(id)
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    };
    return {
      list,
      openDetails,
      longpress,
    };
  },
});
</script>
<style lang="scss" scoped>
.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.box {
  padding: 10px;
  margin-bottom: 20px;
  // height: 70px;
  width: 120px;
  border: 1px solid rgb(219, 230, 228);
  border-radius: 10px;
  .p-time {
    font-size: 12px;
    text-align: right;
    margin-top: 30px;
  }
}
.addBox {
  padding: 20px 10px;
  display: flex;
  justify-content: center;
}
p {
  width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
    